<script setup>
import { ref } from "vue";
import { Drag, Drop } from "vue-easy-dnd";
import painterStore from "@/store/painter";
import { elements } from "@/assets/data/element";
const painterStorer = painterStore();

const activeNames = ref(["1", "0"]);

const handleChange = (val) => {
  console.log(val);
};

const onDragstart = () => {
  painterStorer.setDrag();
};
const onDragend = () => {
  painterStorer.setDrop();
};
</script>
<template>
  <el-collapse v-model="activeNames" :accordion="false" @change="handleChange">
    <el-collapse-item title="" name="0">
      <div class="flex flex-wrap justify-around">
        <Drag
          v-for="item in elements"
          :key="item.name"
          :data="item.data.name"
          :disabled="item.options.disabled"
          @dragstart="onDragstart"
          @dragend="onDragend"
          go-back
          class="bg-slate-400 w-20 my-2 h-10 leading-10 text-center"
        >
          <div
            :class="
              item.options.disabled
                ? 'cursor-no-drop'
                : 'cursor-grab active:cursor-grabbing'
            "
          >
            {{ item.name }}
            {{ item.options.disabled ? "🈲" : "" }}
          </div>
        </Drag>
      </div>
    </el-collapse-item>
    <el-collapse-item title="高级" name="1">
      <div>
        Operation feedback: enable the users to clearly perceive their
        operations by style updates and interactive effects;
      </div>
    </el-collapse-item>
    <el-collapse-item title="会员级 🈲 -需登录后使用" name="2" disabled>
      <div>
        Operation feedback: enable the users to clearly perceive their
        operations by style updates and interactive effects;
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
<style lang="scss" scoped></style>
